<template>
  <div>
    <n-tooltip placement="top" trigger="hover">
      <template #trigger>
        <n-icon :size="size" @click="handleEdit" class="edit-button">
          <GitBranchOutline />
        </n-icon>
      </template>
      <span>在gitee的WebIDE上编辑</span>
    </n-tooltip>
  </div>
</template>

<script setup lang="ts">
import { webIDEBaseURL } from '@/utils';
import { GitBranchOutline } from '@vicons/ionicons5';
import { projectInfo } from '@/config';

const props = withDefaults(defineProps<{
  // 文件路径 如：src/sth.ts
  path?: string
  size?: number
}>(), {
  size: 20
})

function handleEdit() {
  let url = webIDEBaseURL.replace('{owner}', projectInfo.owner)
    .replace('{repo}', projectInfo.repo)
    .replace('{branch}', projectInfo.branch)
  if (props.path) {
    url += `${props.path}`
  }
  window.open(url, '_blank')
}

</script>

<style scoped>
.edit-button {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>